import React, { Component } from "react";
import { connect } from "react-redux";
import "./index.scss";
import { Toast } from "antd-mobile";
import yhTools from "@tools/yh";
import MainLayout from "../../../../component/mainLayout/mainLayout";
import footImg from "../../../../images//imageXHF/xhf_foot.png";
import xhfConfig from "@config/XHFConfig";

@connect(state => ({
	lnid: state.getAppPlatformsDatas.lnid
}))
class ActivateCoupon extends Component {
	constructor(props) {
		super(props);
		this.state = {
			activateList: [],
			missionUrl: "",
			missionStatus: ""
		};
	}
	componentDidMount() {
		console.log(this.props.match.params, this.props);
		this.getActivateList();
	}

	jumpPage(url, data) {
		this.props.history.push({
			pathname: `/${url}`,
			state: data
		});
	}

	//获取任务列表
	getActivateList() {
		const params = {
			url: xhfConfig.activateCoupon,
			params: {
				activityCouponNo: this.props.match.params.id,
				lnid: "601"
			},
			_alertShow: false
		};
		Toast.loading("加载中...", 100, () => {});
		yhTools.request(params).then(res => {
			if (res.code == "0") {
				Toast.hide();
				this.setState({
					missionStatus: res.data.missionStatus,
					missionUrl: res.data.missionUrl,
					activateList: res.data.personCouponMissionInfoList
				});
			} else {
				Toast.hide();
				Toast.info(res.message, 2);
			}
		});
	}

	handleGoJh = () => {
		let { missionUrl } = this.state;
		this.jumpPage(missionUrl);
	};

	render() {
		const _pageParams = {
			header: {
				title: "激活卡券"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};

		return (
			<MainLayout pageParams={_pageParams} fixed>
				<div className="activate-coupon-container">
					<div className="activate-coupon-bg"></div>
					<div className="content">
						<div className="rask-list-card">
							<h3>激活条件</h3>
							<ul>
								{this.state.activateList.map((item, index) => {
									return (
										<li>
											<span>
												{index + 1}.{item.missionName + "：" + item.description}
											</span>
											<div
												className={
													item.missionStatus == "0" ? "no-done" : "yes-done"
												}
											>
												{item.missionStatus == "0" ? "未完成" : "已完成"}
											</div>
										</li>
									);
								})}
							</ul>
						</div>
						<div className="footer-img">
							<img src={footImg} alt="" />
						</div>
						<div className="activate-coupon-btn-box">
							<div className="activate-coupon-btn" onClick={this.handleGoJh}>
								{this.state.missionStatus == "0" ? "去激活" : "去使用"}
							</div>
						</div>
					</div>
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

const ActivateCouponPage = connect(
	mapStateToProps,
	mapDispatchToProps
)(ActivateCoupon);
export default ActivateCouponPage;
